<script setup>
import "quarkd/lib/tab";
import "quarkd/lib/navbar";
import "quarkd/lib/form";
import "quarkd/lib/field";
import "quarkd/lib/button";
import Toast from "quarkd/lib/toast";

import { ref, inject } from 'vue';
import { useRouter } from 'vue-router';

// 注入由整个应用提供的数据
const $http = inject('$http');

const form = ref(null);

const router = useRouter();


const active = ref('tel');

function tabChange({detail}) {
  active.value = detail.name;
}

const map = {
  'tel': '手机号',
  'email': '邮箱',
  'account': '账号',
}

function register() {
  const quarkForm = form.value;
  // console.log( form );
  // quarkForm.getFormData() 直接返回表单中所有 quark-field 的值
  // 获取表单中所有 quark-field 的值(返回一个Promise实例)
  const promise = quarkForm.getValues();
  promise.then( fields => {
    const { password, confirm } = fields;
    const { value: type } = active; 
    const x = fields[ type ];
    if( x == undefined ) {
      Toast.text( `请输入${map[type]}` );
      return;
    }
    if( password == undefined ) {
      Toast.text( '请输入密码' );
      return;
    }
    if( password != confirm ) {
      Toast.text( '两次密码不一致' );
      return;
    }

    $http.post(`/backapi/user/register/${type}`, {
        [type]: x ,  /*动态设置属性*/
        password, // `password` 是 `password: password` 的缩写
    }).then( resp => {
      const { success, message } = resp.data;
      if( success ) {
        router.push({ name: 'login' });
        return;
      }
      Toast.text( message );
    }).catch( reason => {
      Toast.text(reason);
    });
  }).catch( err => Toast.text( err ) );
}

function noop(){
  // No Operation
}
</script>

<template>
  <!--顶部标题-->
  <quark-navbar title="注册新用户" lefthide closehide />
  <div class="wrapper">
    <!--注册表单区域-->
    <quark-form ref="form">
        <quark-tabs :activekey="active" @change="tabChange">
          <quark-tab-content label="手机号" name="tel">
            <!--用手机号注册-->
            <quark-field name="tel" label="手机号" placeholder="请输入手机号" @change.stop="noop" />
          </quark-tab-content>
          <quark-tab-content label="邮箱" name="email">
            <!--用邮箱注册-->
            <quark-field name="email" label="邮箱" placeholder="请输入邮箱" @change.stop="noop" />
          </quark-tab-content>
          <quark-tab-content label="账号" name="account">
            <!--注册新账号-->
            <quark-field name="account" label="账号" placeholder="请输入账号" @change.stop="noop" />
          </quark-tab-content>
        </quark-tabs>
        <quark-field name="password" type="password" label="登录密码" placeholder="请输入密码" />
        <div class="line" />
        <quark-field name="confirm" type="password" label="确认密码" placeholder="请确认密码" />
        <div class="line" />
        <div class="button-wrap">
          <div class="button" @click="register">注册</div>
        </div>
    </quark-form>
  </div>
</template>

<style scoped>
.wrapper {
  margin: 15px;
}
.line {
  height: 1px;
  background: #dfdfdf;
}
.button-wrap {
  padding: 4.26667vw;
  background: #fff;
}
.button {
  border-radius: 1vw;
  height: 10vw;
  line-height: 10vw;  
  font-size: var(--field-label-font-size, 4vw);
  color: #fff;
  text-align: center;
  background: #66f;
}
</style>